<!-- #layout name=default-->
<div id="main" v-cloak>
  <div class="page-header">
    <div>
      <div v-if="isNewProductType">
        <h1 class="title">{{ Kooboo.text.common.ProductType + ': ' }}</h1>
        <kb-form
          simple
          ref="form"
          class="pull-left"
          :model="model"
          :rules="rules"
        >
          <kb-form-item prop="typename" v-slot="error">
            <div class="form-group" :class="{'has-error' : !!error.error }">
              <input
                class="form-control input-medium"
                v-model="model.typename"
                v-kb-tooltip:right.manual.error="error.error"
              />
            </div>
          </kb-form-item>
        </kb-form>
      </div>
      <h1 v-else class="title"
        ><span>{{ Kooboo.text.common.ProductType + ': ' }}</span>:
        <strong>{{ model.typename }}</strong></h1
      >
    </div>
  </div>
  <div class="navbar navbar-default">
    <div class="container-fluid">
      <a class="btn green navbar-btn" href="javascript:;" @click="addNewField"
        >New field</a
      >
    </div>
  </div>
  <table class="table table-striped table-hover">
    <thead>
      <tr>
        <th class="table-sortable"></th>
        <th>Name</th>
        <th class="table-short">Display name</th>
        <th class="table-short">Control type</th>
        <th class="table-short">Multiple language</th>
        <th class="table-short">User editable</th>
        <th class="table-short">Specification field</th>
        <th class="table-action"></th>
      </tr>
    </thead>
    <tbody class="ui-sortable" v-kb-sortable="fields">
      <tr v-for="($data, index) in fields" :key="index">
        <td class="table-sortable">
          <span class="sortable"><i class="glyphicon glyphicon-list"></i></span>
        </td>
        <td>
          <a href="javascript:;" @click.stop="editField($data, index)"
            >{{ $data.name }}</a
          >
        </td>
        <td :title="$data.displayName"
          >{{ $data.displayName | ellipsis:10 }}</td
        >
        <td
          >{{ Kooboo.text.component.controlType[_.camelCase($data.controlType)]
          }}</td
        >
        <td>
          <span
            class="label label-sm"
            :class="$data.multipleLanguage ? 'green' : 'label-default'"
            >{{ Kooboo.text.common[$data.multipleLanguage ? 'yes' : 'no']
            }}</span
          >
        </td>
        <td>
          <span
            class="label label-sm"
            :class="$data.editable ? 'green' : 'label-default' "
            >{{ Kooboo.text.common[$data.editable ? 'yes' : 'no'] }}</span
          >
        </td>
        <td>
          <span
            class="label label-sm label-default"
            :class="$data.isSpecification ? 'green' : 'label-default'"
            >{{ Kooboo.text.common[$data.isSpecification ? 'yes' : 'no']
            }}</span
          >
        </td>
        <td>
          <a
            class="btn btn-xs red"
            href="javascript:;"
            @click.stop="removeField($data, index)"
            >Remove</a
          >
        </td>
      </tr>
    </tbody>
  </table>

  <div class="page-buttons">
    <button @click="onSave" class="btn green">Save</button>
    <a :href="productTypesUrl" class="btn gray">Cancel</a>
  </div>

  <div
    class="modal fade"
    data-backdrop="static"
    data-keyboard="false"
    v-kb-modal="onFieldModalShow"
  >
    <kb-field-editor
      @on-save="onFieldSave"
      v-if="onFieldModalShow"
      :close-handle="onModalClose"
      :all-items="fields"
      :editing-index="editingItemIndex"
      :data="fieldData"
      :options="fieldEditorOptions"
    ></kb-field-editor>
  </div>
</div>
<script>
  (function() {
    Kooboo.loadJS([
      "/_Admin/Scripts/kooboo/Guid.js",
      "/_Admin/Scripts/lib/jquery-ui-customized.js",
      "/_Admin/Scripts/components/kbForm.js",
      "/_Admin/Scripts/components/kbFieldEditor.js"
    ]);

    Kooboo.loadCSS(["/_Admin/Styles/jquery-ui-customized.css"]);
  })();
</script>
<script src="/_Admin/View/ECommerce/Product/Type.js"></script>
